<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>购物车</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/list_shoppingCart.css"/>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <script src="js/mui.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/jquery.3.2.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init({
            keyEventBind: {
                backbutton: true
            }
        });

        mui.old_back = mui.back;
        var clickNum = 0;
        mui.back = function () {
            clickNum++;
            if (clickNum > 1) {
                plus.runtime.quit();
            } else {
                mui.toast("再按一次退出应用");
            }
            setTimeout(function () {
                clickNum = 0
            }, 1000);
            return false;
        }
    </script>
</head>
<body id="gouwuche">
<div id="shopping">
    <header class="mui-bar mui-bar-nav">
        <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
        <h1 class="mui-title">我的购物车</h1>
        <p>编辑</p>
        <a id="info" class="info fr">&#xe6c5;</a>
    </header>
    <div class="mui-content">
        <div class="shopping_con">
            <div class="conTitle">
                <div class="img fl"></div>
                <h3 class="fl">芦苇微微文艺清新女装<i>&#xe6d7;</i></h3>
            </div>
            <ul>
                <li class="conBox clear" v-for="item in list">
                    <!--<div class="checkbox fl checkbox_sel"></div>-->
                    <div class="radio fl" :class="{'checked':item.checked}" @click="select(item)">
                        <input type="checkbox" name="checkbox">
                        <label></label>
                    </div>
                    <div class="img fl">
                        <img :src="item.imgPath" alt="">
                    </div>
                    <div class="text fl">
                        <h3>{{item.productName}}</h3>
                        <span>款式：米白色</span>
                        <span>尺码：L</span>
                        <br/>
                        <span>价格：￥<mark>{{item.productPrice}}</mark></span>
                    </div>
                    <p class="fr">×<span>{{item.Number}}</span></p>
                </li>
            </ul>
        </div>
        <div class="GuessLike">
            <h2>猜你喜欢</h2>
            <ul>
                <li>
                    <img src="images/shoppingCart/shop1.jpg"/>
                    <p class="p1">韩版百搭连衣裙甜美</p>
                    <p>
                        <span class="price fl">￥88.75</span>
                        <span class="span fr">4人已喜欢</span>
                    </p>
                </li>
                <li>
                    <img src="images/shoppingCart/shop2.jpg"/>
                    <p class="p1">韩版牛仔超短裤潮流</p>
                    <p>
                        <span class="price fl">￥72.06</span>
                        <span class="span fr">15人已喜欢</span>
                    </p>
                </li>
            </ul>
        </div>
        <div class="confirm">
            <div class="radio fl" :class="{'checked':checkedAll}" @click="ALL">
                <input type="checkbox" name="check">
                <label></label>
                <span>全选</span>
            </div>
            <div class="sum fl">
                <p class="p2">合计：￥<span id="sum">{{totalMoney}}</span></p>
                <p class="p3">不含满减优惠，不含运费</p>
            </div>
            <button class="fr" id="qrdd">确认订单</button>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
    document.getElementById("qrdd").addEventListener("tap", function () {
        mui.openWindow({
            url: "shop/confirmOrder.html",
            id: "confirmOrder",
            createNew: true,
            show: {
                aniShow: "slide-in-right",
                duration: 200
            },
            waiting: {
                title: "正在加载..."
            }
        });
    });

    document.getElementById("info").addEventListener("tap", function () {
        mui.openWindow({
            url: "index/info.html",
            id: "info",
            createNew: true,
            show: {
                aniShow: "slide-in-right",
                duration: 200
            },
            waiting: {
                title: "正在加载..."
            }
        });
    });


//    vue部分
    $.getJSON("js/product.json", function (res) {
        var vm = new Vue({
            el: "#shopping",
            data: {
                list: res.result.list,
                checkedAll: false,
                totalMoney: 0,
                i: 0
            },
            methods: {
                select: function (item) {
                    var y = this.list.length;
                    if (typeof  item.checked == 'undefined') {
                        this.i++;
                        Vue.set(item, 'checked', true);
                    } else {
                        item.checked = !item.checked;
                        if (item.checked) {
                            this.i++;
                        } else {
                            this.i--;
                        }
                    }
                    if (this.i == y) {
                        this.ALL();
                    } else {
                        this.checkedAll = false;
                    }
                    this.totalNumber();
                },
                ALL: function () {
                    this.checkedAll = !this.checkedAll;
                    if (this.checkedAll) {
                        this.list.forEach(function (value, index) {
                            if (typeof  value.checked == 'undefined') {
                                Vue.set(value, 'checked', true);
                            } else {
                                value.checked = true;
                            }
                        });
                    } else {
                        this.list.forEach(function (value, index) {
                            value.checked = false;
                        });
                    }
                    this.totalNumber();
                },
                totalNumber: function () {

                    var _this = this;
                    this.totalMoney = 0;
                    this.list.forEach(function (item, index) {
//                        console.log("123");
                        if (item.checked) {
                            _this.totalMoney += item.Number * item.productPrice;
//                            console.log(_this.totlaMoney);
                        }
                    })

                }
            }
        })
    });
</script>
</body>
</html>
